<template>
	<div class="app-container">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 120px;" v-model="listQuery.status" placeholder="请选择状态">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
      </el-select>
      <el-select class="filter-item" style="width: 150px;" v-model="listQuery.type" placeholder="请选择搜索方式">
        <el-option v-for="item in typeOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
      </el-select>
      <el-input class="filter-item" @keyup.enter.native="handleFilter" v-model="listQuery.content" clearable style="width: 200px;" placeholder="请输入内容"></el-input>
      <el-button type="primary" class="filter-item search" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading" element-loading-text="加载中..." fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column align="center" label="评论内容">
        <template slot-scope="scope" v-if="scope.row.content != '' && scope.row.content != null">
          <div class="text-alignL color-222">{{ scope.row.content }}</div>
          <div class="text-alignL color-999">[{{scope.row.createdAt}}]</div>
          <div class="bg-f5f7fa color-409 text-alignL" v-if="scope.row.replyContent != '' && scope.row.replyContent != null"><span class="color-999">[回复]</span>&nbsp;{{scope.row.replyContent}}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="评论人" width="140">
        <template slot-scope="scope">

              <div class="text-alignL color-222">{{ scope.row.nickname }}</div>
              <div class="text-alignL color-999">{{scope.row.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" width="180" label="评论产品">
        <template slot-scope="scope">
          <div class="color-222 text-alignL">{{ scope.row.courseName }}</div>
          <div class="color-999 text-alignL">{{ showCourseTypeName(scope.row.courseType) }}</div>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="用户信息" width="180">-->
        <!--<template slot-scope="scope">-->
          <!--<div class="c-flex-row c-aligni-center">-->
            <!--<img :src="scope.row.headimgurl" v-if="scope.row.headimgurl != '' && scope.row.headimgurl != null" width="35" height="35"/>-->
            <!--<div class="c-flex-column padding-l10">-->
              <!--<span>{{ scope.row.nickname }}</span>-->
              <!--<span>{{scope.row.mobile }}</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" label="类型" width="50">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ showCourseTypeName(scope.row.courseType) }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" label="课程名称">-->
        <!--<template slot-scope="scope">-->
            <!--<span title="haha">{{ scope.row.courseName }}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" label="评论内容">-->
        <!--<template slot-scope="scope" v-if="scope.row.content != '' && scope.row.content != null">-->
          <!--<span :class="scope.row.content.length > 20 ? 'c-text-ellipsis3' : ''">{{ scope.row.content }}</span><span v-if="scope.row.content.length > 20" class="checkMore" @click="checkMore(scope.row.content)">更多</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" label="评论时间	" width="90">-->
        <!--<template slot-scope="scope" v-if="scope.row.createdAt != '' && scope.row.createdAt != null">-->
          <!--<p>{{ scope.row.createdAt.split(" ")[0] }}</p>-->
          <!--<p>{{ scope.row.createdAt.split(" ")[1] }}</p>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--
      <el-table-column align="center" label="点赞数" width="70">
        <template slot-scope="scope">
          <span>{{ scope.row.likes }}</span>
        </template>
      </el-table-column>
      -->
      <!--<el-table-column align="center" label="回复内容">-->
        <!--<template slot-scope="scope" v-if="scope.row.replyContent != '' && scope.row.replyContent != null">-->
          <!--<span :class="scope.row.replyContent.length > 20 ? 'c-text-ellipsis3' : ''">{{ scope.row.replyContent }}</span><span v-if="scope.row.replyContent.length > 20" class="checkMore" @click="checkMore(scope.row.replyContent)">更多</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column align="center" label="回复时间" width="90">-->
        <!--<template slot-scope="scope" v-if="scope.row.replyTime != '' && scope.row.replyTime != null">-->
          <!--<p>{{ scope.row.replyTime.split(" ")[0] }}</p>-->
          <!--<p>{{ scope.row.replyTime.split(" ")[1] }}</p>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column align="center" label="状态" width="50">
        <template slot-scope="scope">
          <span>{{ showStatusName(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="permission == 3" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <b @click="showReplyDialog(scope.row.cId, scope.row.courseId, scope.row.replyTime)">回复</b><span class="color-409">|</span>
          <b @click="setCommentStatus(scope.row.cId, 2)" v-show="scope.row.status != 2">精选</b><span v-show="scope.row.status != 2" class="color-409">|</span>
          <b @click="setCommentStatus(scope.row.cId, 3)" v-show="scope.row.status != 3">隐藏</b>
          <!-- <b @click="setCommentStatus(scope.row.cId, 1)" v-show="scope.row.status != 1">最新</b> -->
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <replyContent v-if="isShowReply" :replyData="replyData" :isReply="isReply" @changeShowReply="hideReplyDialog"></replyContent>
  </div>
</template>

<script>
  import replyContent from './components/replyContent' // 引入回复内容组件
  import { getCourseCommentList, updateCommentStatus } from '@/api/courseComment'
  import { interaction_comment } from '@/utils/permission'
  const statusOptions = [
    { key: 0, value: '全部状态' },
    { key: 1, value: '显示' },
    { key: 2, value: '精选' },
    { key: 3, value: '隐藏' }
  ]

  const typeOptions = [
    { key: 1, value: '评论内容' },
    { key: 2, value: '课程名称' },
    { key: 3, value: '用户昵称' },
    { key: 4, value: '用户手机' }
  ]

  export default {
    components: { replyContent },
    created() {
      this.getModelPermission()
      this.initList()
    },
    data() {
      return {
        permission: 3,
        listQuery: {
          status: 0,
          type: 1,
          content: null,
          page: 1,
          pageSize: 10
        },
        statusOptions,
        typeOptions,
        tableData: [],
        total: null,
        listLoading: false,
        replyData: {
          cId: null,
          courseId: null
        },
        isReply: false,
        isShowReply: false // 是否显示回复组件
      }
    },
    methods: {
      getModelPermission() {
        this.permission = interaction_comment()
      },
      checkMore(message) {
        this.$alert(message, '', { confirmButtonText: '关闭' })
      },
      initList() {
        let courseId = this.$route.params.courseId
        if (!courseId) {
          courseId = 0
        }
        this.listLoading = true
        getCourseCommentList(courseId, this.listQuery).then(res => {
          console.log('评论', res.data.data.data)
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
      },
      showCourseTypeName(type) {
        if (type == 0) {
          return '视频'
        } else if (type == 1) {
          return '音频'
        } else if (type == 2) {
          return '视频'
        }
      },
      showStatusName(type) {
        if (type == 1) {
          return '最新'
        } else if (type == 2) {
          return '精选'
        } else if (type == 3) {
          return '隐藏'
        }
      },
      handleFilter() {
        this.listQuery.page = 1
        this.initList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.initList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.initList()
      },
      showReplyDialog(cId, courseId, replyTime) {
        this.isShowReply = true
        this.replyData.cId = cId
        this.replyData.courseId = courseId
        if (replyTime) {
          this.isReply = true
        }
      },
      hideReplyDialog(content) {
        this.isShowReply = false
        if (content) {
          this.initList()
        }
      },
      setCommentStatus(cId, val) {
        var isGood = ''
        if (val == 2) {
          isGood = 1
        }else{
          isGood = 0
        }
        const msg = this.showStatusName(val)
        this.$confirm(`确定${msg}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
          this.listLoading = true
          updateCommentStatus(0, cId, { 'status': val,isGood: isGood}).then(res => {
            if (res.data.statusCode == 200) {
              this.$message({
                type: 'success',
                message: `设置${msg}成功`
              })
              this.initList()
            } else {
              this.listLoading = false
              this.$message({
                type: 'error',
                message: `设置${msg}失败`
              })
            }
          }).catch(err => {
            this.listLoading = false
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: `已取消${msg}`
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
